<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增开门密码')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-pwd-add">
            <div class="row">
                <div class="col-sm-3"></div>
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <label style="color: red">*</label>设备名称
                        </div>
                        <div class="panel-body">
                            <label th:each="device:${deviceList}" class="check-box">
                                <input name="device" type="checkbox" th:value="${device.id}" th:text="${device.name}" th:cp="${device.controlPort}" th:dn="${device.name}" th:pn="${device.positionName}">
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3"></div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">密码：</label>
                            <div class="col-sm-8">
                                <input id="pwd" class="form-control" type="text" minlength="8" maxlength="8" required>
                            </div>
                        </div>
                        <div id="otDiv" class="form-group" style="display: none">
                            <label class="col-sm-3 control-label">开门次数：</label>
                            <div class="col-sm-8">
                                <input id="openTimes" name="openTimes" class="form-control">
                            </div>
                        </div>
                        <div id="exDiv" class="form-group" style="display: none">
                            <label class="col-sm-3 control-label">有效期：</label>
                            <div class="col-sm-8">
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="expiry" placeholder="yyyy-MM-dd HH:mm:ss">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "door/device/pwd";
        var loginName = [[${@permission.getPrincipalProperty('loginName')}]];
        var param;

        $("#form-pwd-add").validate({
            onkeyup: false,
            rules: {
                openTimes: {
                    digits: true,
                    min: 0,
                    max: 65535
                }
            },
            focusCleanup: true
        });

        $("#expiry").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });

        $(function () {
            if (parent.param.modelType == "2") {
                $("#otDiv").show();
                $("#exDiv").show();
            }
        })

        function submitHandler() {
            if ($.validate.form()) {
                var devices = $.form.selectCheckeds("device").split(",");
                if ($.common.isEmpty(devices)) {
                    $.modal.alertError("设备名称必选");
                    return;
                }
                var password = $("#pwd").val();
                var openTimes = $("#openTimes").val();
                var expiry = $("#expiry").val();
                var pwdList = [];
                $.each(devices, function (index, obj) {
                    var pwd = {"sn": parent.$("#sn").val(),
                        "deviceId": obj,
                        "password": password,
                        "openTimes": openTimes,
                        "expiry": expiry,
                        "createBy": loginName,
                        "delFlag": "0"};
                    $("input[name=device]").each(function(index1, obj1){
                        if (obj1.value == obj) {
                            pwd.controlPort = $(this).attr("cp");
                            pwd.deviceName = $(this).attr("dn");
                            pwd.positionName = $(this).attr("pn");
                            return;
                        }
                    });
                    pwdList.push(pwd);
                });
                parent.param.param = pwdList;
                param = parent.param;
                $.modal.open("操作记录", ctx + "door/device/custom?operation=WRITE_PASSWORD", null, null, null, true);
            }
        }

    </script>
</body>
</html>